<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <!-- 公告 -->
      <template v-if="item.type === 'notice'">
        <diyNotice :diyItem="item"></diyNotice>
      </template>

      <!-- 魔方 -->
      <template v-if="item.type === 'window'">
        <diyWindow :diyItem="item"></diyWindow>
      </template>

      <!-- 单图 -->
      <template v-if="item.type === 'single'">
        <diySingle :diyItem="item"></diySingle>
      </template>

      <!-- 轮播图 -->
      <template v-if="item.type === 'banner'">
        <diyBanner :diyItem="item"></diyBanner>
      </template>

      <!-- 标题栏 -->
      <template v-if="item.type === 'title'">
        <diyTitle :diyItem="item"></diyTitle>
      </template>

      <!-- 导航栏 -->
      <template v-if="item.type === 'nav_bar'">
        <diyNavBar :diyItem="item"></diyNavBar>
      </template>

      <!-- 搜索 -->
      <template v-if="item.type === 'search'">
        <diySearch :diyItem="item"></diySearch>
      </template>

      <!-- 辅助线 -->
      <template v-if="item.type === 'guide'">
        <diyGuide :diyItem="item"></diyGuide>
      </template>

      <!-- 个人中心 -->
      <template v-if="item.type === 'user'">
        <diyUser :diyItem="item"></diyUser>
      </template>

      <!-- 我的订单 -->
      <template v-if="item.type === 'order'">
        <diyOrder :diyItem="item"></diyOrder>
      </template>

      <!-- 商品列表 -->
      <template v-if="item.type === 'goods'">
        <diyGoods :diyItem="item"></diyGoods>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "diyGroup",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import diyNotice from "@/components/diy/notice/index.vue";
import diyWindow from "@/components/diy/window/index.vue";
import diySingle from "@/components/diy/single/index.vue";
import diyBanner from "@/components/diy/banner/index.vue";
import diyTitle from "@/components/diy/title/index.vue";
import diyGuide from "@/components/diy/guide/index.vue";
import diyNavBar from "@/components/diy/nav-bar/index.vue";
import diySearch from "@/components/diy/search/index.vue";
import diyUser from "@/components/diy/user/index.vue";
import diyOrder from "@/components/diy/order/index.vue";
import diyGoods from "@/components/diy/goods/index.vue";

const props = withDefaults(
  defineProps<{
    items: any;
  }>(),
  {
    items: {},
  }
);
</script>
  